import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import './App.css';

// 引入样式
import 'antd/dist/reset.css';
import './theme/dark.css';

// 引入主题提供者
import { ThemeProvider } from './theme/ThemeContext';

// 权限守卫组件
import PermissionGuard from './components/PermissionGuard';

// 懒加载布局组件
const FrontendLayout = React.lazy(() => import('./layouts/FrontendLayout'));
const AdminLayout = React.lazy(() => import('./layouts/AdminLayout'));

// 懒加载公共组件
const Login = React.lazy(() => import('./pages/common/Login'));
const AdminLogin = React.lazy(() => import('./pages/admin/Login'));
const NotFound = React.lazy(() => import('./pages/common/NotFound'));

// 懒加载前台页面
const Home = React.lazy(() => import('./pages/frontend/Home'));
const Category = React.lazy(() => import('./pages/frontend/Category'));
const ProductDetail = React.lazy(() => import('./pages/frontend/ProductDetail'));
const Cart = React.lazy(() => import('./pages/frontend/Cart'));
const OrderCreate = React.lazy(() => import('./pages/frontend/OrderCreate'));
const Payment = React.lazy(() => import('./pages/frontend/Payment'));
const OrderDetail = React.lazy(() => import('./pages/frontend/OrderDetail'));
const OrderList = React.lazy(() => import('./pages/frontend/OrderList'));
const Profile = React.lazy(() => import('./pages/frontend/Profile'));
const Search = React.lazy(() => import('./pages/frontend/Search'));
const Address = React.lazy(() => import('./pages/frontend/Address'));
const Favorites = React.lazy(() => import('./pages/frontend/Favorites'));
const Settings = React.lazy(() => import('./pages/frontend/Settings'));
const About = React.lazy(() => import('./pages/frontend/About'));
const Account = React.lazy(() => import('./pages/frontend/Account'));

// 懒加载后台页面
const Dashboard = React.lazy(() => import('./pages/admin/Dashboard'));
const ProductManage = React.lazy(() => import('./pages/admin/ProductManage'));
const CategoryManage = React.lazy(() => import('./pages/admin/CategoryManage'));
const OrderManage = React.lazy(() => import('./pages/admin/OrderManage'));
const UserManage = React.lazy(() => import('./pages/admin/UserManage'));

// 加载组件
const LoadingComponent = () => (
  <div className="loading-container">
    <div className="loading-spinner">加载中...</div>
  </div>
);

function App() {
  return (
    <ThemeProvider>
      <React.Suspense fallback={<LoadingComponent />}>
        <Routes>
          {/* 根路由重定向到登录页 */}
          <Route path="/" element={<Navigate to="/login" replace />} />

          {/* 前台登录 */}
          <Route path="/login" element={<Login />} />

          {/* 前台路由 */}
          <Route element={<FrontendLayout />}>
            <Route path="/home" element={<Home />} />
            <Route path="/category/:categoryId" element={<Category />} />
            <Route path="/product/:productId" element={<ProductDetail />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/order/create" element={<OrderCreate />} />
            <Route path="/order/payment/:orderId" element={<Payment />} />
            <Route path="/order/detail/:orderId" element={<OrderDetail />} />
            <Route path="/order/list" element={<OrderList />} />
            <Route path="/my" element={<Profile />} />
            <Route path="/search" element={<Search />} />
            <Route path="/address" element={<Address />} />
            <Route path="/favorites" element={<Favorites />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/about" element={<About />} />
            <Route path="/account" element={<Account />} />
          </Route>

          {/* 后台路由 */}
          <Route path="/admin" element={<AdminLayout />}>
            <Route index element={<Dashboard />} />
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="products" element={<ProductManage />} />
            <Route path="categories" element={<CategoryManage />} />
            <Route path="orders" element={<OrderManage />} />
            <Route path="users" element={
              <PermissionGuard requiredPermission="users">
                <UserManage />
              </PermissionGuard>
            } />
          </Route>

          {/* 后台登录 */}
          <Route path="/admin/login" element={<AdminLogin />} />

          {/* 404页面 */}
          <Route path="/404" element={<NotFound />} />

          {/* 重定向到404 */}
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </React.Suspense>
    </ThemeProvider>
  );
}

export default App;
